<script setup>
import {onMounted} from "vue";
import * as echarts from 'echarts';
onMounted(() => {
  let lt = document.getElementById('left-top')
  let chart_53eed420295546fa9c67983887320b6f = echarts.init(lt)
  var option_c81a1703e1844341a09bf22121a2c0e1 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
      "enabled": false
    },
    "color": [
      "pink",
      "red",
      "blue",
      "red",
      "blue",
      "#5470c6",
      "#91cc75",
      "#fac858",
      "#ee6666",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc"
    ],
    "series": [
      {
        "type": "bar",
        "name": "\u603b\u4eba\u6570(\u4e07\u4eba)",
        "yAxisIndex": 0,
        "legendHoverLink": true,
        "data": [
          52.4825,
          54.4424,
          59.4771,
          66.2199,
          66.6
        ],
        "realtimeSort": false,
        "showBackground": false,
        "stackStrategy": "samesign",
        "cursor": "pointer",
        "barMinHeight": 0,
        "barCategoryGap": "20%",
        "barGap": "30%",
        "large": false,
        "largeThreshold": 400,
        "seriesLayoutBy": "column",
        "datasetIndex": 0,
        "clip": true,
        "zlevel": 0,
        "z": 2,
        "label": {
          "show": false,
          "margin": 8
        },
        "itemStyle": {
          "opacity": 0.7
        },
        "rippleEffect": {
          "show": true,
          "brushType": "stroke",
          "scale": 2.5,
          "period": 4
        }
      },
      {
        "type": "line",
        "name": "\u666e\u901a\u4e00\u6bb5\u7ebf",
        "connectNulls": false,
        "xAxisIndex": 0,
        "yAxisIndex": 2,
        "symbolSize": 4,
        "showSymbol": true,
        "smooth": false,
        "clip": true,
        "step": false,
        "data": [
          [
            "2020",
            449
          ],
          [
            "2021",
            444
          ],
          [
            "2022",
            437
          ],
          [
            "2023",
            443
          ],
          [
            "2024",
            444
          ]
        ],
        "hoverAnimation": true,
        "label": {
          "show": false,
          "margin": 8
        },
        "logBase": 10,
        "seriesLayoutBy": "column",
        "lineStyle": {
          "show": true,
          "width": 1,
          "opacity": 1,
          "curveness": 0,
          "type": "solid"
        },
        "areaStyle": {
          "opacity": 0
        },
        "itemStyle": {
          "opacity": 0.7
        },
        "zlevel": 0,
        "z": 3,
        "rippleEffect": {
          "show": true,
          "brushType": "stroke",
          "scale": 2.5,
          "period": 4
        }
      },
      {
        "type": "line",
        "name": "\u7279\u6b8a\u7c7b\u578b\u62db\u751f\u63a7\u5236\u7ebf",
        "connectNulls": false,
        "xAxisIndex": 0,
        "yAxisIndex": 2,
        "symbolSize": 4,
        "showSymbol": true,
        "smooth": false,
        "clip": true,
        "step": false,
        "data": [
          [
            "2020",
            532
          ],
          [
            "2021",
            518
          ],
          [
            "2022",
            513
          ],
          [
            "2023",
            520
          ],
          [
            "2024",
            521
          ]
        ],
        "hoverAnimation": true,
        "label": {
          "show": false,
          "margin": 8
        },
        "logBase": 10,
        "seriesLayoutBy": "column",
        "lineStyle": {
          "show": true,
          "width": 1,
          "opacity": 1,
          "curveness": 0,
          "type": "solid"
        },
        "areaStyle": {
          "opacity": 0
        },
        "itemStyle": {
          "opacity": 0.7
        },
        "zlevel": 0,
        "z": 3,
        "rippleEffect": {
          "show": true,
          "brushType": "stroke",
          "scale": 2.5,
          "period": 4
        }
      },
      {
        "type": "line",
        "name": "\u666e\u901a\u4e00\u6bb5\u7ebf",
        "connectNulls": false,
        "xAxisIndex": 0,
        "yAxisIndex": 2,
        "symbolSize": 4,
        "showSymbol": true,
        "smooth": false,
        "clip": true,
        "step": false,
        "data": [
          [
            "2020",
            449
          ],
          [
            "2021",
            444
          ],
          [
            "2022",
            437
          ],
          [
            "2023",
            443
          ],
          [
            "2024",
            444
          ]
        ],
        "hoverAnimation": true,
        "label": {
          "show": false,
          "margin": 8
        },
        "logBase": 10,
        "seriesLayoutBy": "column",
        "lineStyle": {
          "show": true,
          "width": 1,
          "opacity": 1,
          "curveness": 0,
          "type": "solid"
        },
        "areaStyle": {
          "opacity": 0
        },
        "itemStyle": {
          "opacity": 0.7
        },
        "zlevel": 0,
        "z": 3,
        "rippleEffect": {
          "show": true,
          "brushType": "stroke",
          "scale": 2.5,
          "period": 4
        }
      },
      {
        "type": "line",
        "name": "\u7279\u6b8a\u7c7b\u578b\u62db\u751f\u63a7\u5236\u7ebf",
        "connectNulls": false,
        "xAxisIndex": 0,
        "yAxisIndex": 2,
        "symbolSize": 4,
        "showSymbol": true,
        "smooth": false,
        "clip": true,
        "step": false,
        "data": [
          [
            "2020",
            532
          ],
          [
            "2021",
            518
          ],
          [
            "2022",
            513
          ],
          [
            "2023",
            520
          ],
          [
            "2024",
            521
          ]
        ],
        "hoverAnimation": true,
        "label": {
          "show": false,
          "margin": 8
        },
        "logBase": 10,
        "seriesLayoutBy": "column",
        "lineStyle": {
          "show": true,
          "width": 1,
          "opacity": 1,
          "curveness": 0,
          "type": "solid"
        },
        "areaStyle": {
          "opacity": 0
        },
        "itemStyle": {
          "opacity": 0.7
        },
        "zlevel": 0,
        "z": 3,
        "rippleEffect": {
          "show": true,
          "brushType": "stroke",
          "scale": 2.5,
          "period": 4
        }
      }
    ],
    "legend": [
      {
        "data": [
          "\u603b\u4eba\u6570(\u4e07\u4eba)",
          "\u666e\u901a\u4e00\u6bb5\u7ebf",
          "\u7279\u6b8a\u7c7b\u578b\u62db\u751f\u63a7\u5236\u7ebf",
          "\u666e\u901a\u4e00\u6bb5\u7ebf",
          "\u7279\u6b8a\u7c7b\u578b\u62db\u751f\u63a7\u5236\u7ebf"
        ],
        "selected": {},
        "show": true,
        "top":"80%",
        "padding": 5,
        "itemGap": 10,
        "itemWidth": 25,
        "itemHeight": 14,
        "textStyle": {
          "fontSize": 12
        },
        "backgroundColor": "transparent",
        "borderColor": "#ccc",
        "borderRadius": 0,
        "pageButtonItemGap": 5,
        "pageButtonPosition": "end",
        "pageFormatter": "{current}/{total}",
        "pageIconColor": "#2f4554",
        "pageIconInactiveColor": "#aaa",
        "pageIconSize": 15,
        "animationDurationUpdate": 800,
        "selector": false,
        "selectorPosition": "auto",
        "selectorItemGap": 7,
        "selectorButtonGap": 10
      }
    ],
    "tooltip": {
      "show": true,
      "trigger": "item",
      "triggerOn": "mousemove|click",
      "axisPointer": {
        "type": "line"
      },
      "showContent": true,
      "alwaysShowContent": false,
      "showDelay": 0,
      "hideDelay": 100,
      "enterable": false,
      "confine": false,
      "appendToBody": false,
      "transitionDuration": 0.4,
      "textStyle": {
        "fontSize": 14
      },
      "borderWidth": 0,
      "padding": 5,
      "order": "seriesAsc"
    },
    "xAxis": [
      {
        "show": true,
        "scale": false,
        "nameLocation": "end",
        "nameGap": 15,
        "gridIndex": 0,
        "axisLabel": {
          "show": true,
          "margin": 8,
          "fontSize": 12
        },
        "inverse": false,
        "offset": 0,
        "splitNumber": 5,
        "minInterval": 0,
        "splitLine": {
          "show": false,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        },
        "data": [
          "2020",
          "2021",
          "2022",
          "2023",
          "2024"
        ]
      }
    ],
    "yAxis": [
      {
        "show": true,
        "scale": false,
        "nameLocation": "end",
        "nameGap": 15,
        "gridIndex": 0,
        "axisLabel": {
          "show": true,
          "margin": 8,
          "fontSize": 12
        },
        "inverse": false,
        "offset": 0,
        "splitNumber": 5,
        "minInterval": 0,
        "splitLine": {
          "show": false,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        }
      },
      {
        "type": "value",
        "name": "\u603b\u4eba\u6570(\u4e07\u4eba)",
        "show": true,
        "scale": false,
        "nameLocation": "end",
        "nameGap": 15,
        "gridIndex": 0,
        "axisLine": {
          "show": true,
          "onZero": true,
          "onZeroAxisIndex": 0,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        },
        "axisLabel": {
          "show": true,
          "color": "red",
          "margin": 8
        },
        "inverse": false,
        "position": "left",
        "offset": 0,
        "splitNumber": 5,
        "minInterval": 0,
        "splitLine": {
          "show": true,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        }
      },
      {
        "type": "value",
        "name": "\u5206\u6570",
        "show": true,
        "scale": false,
        "nameLocation": "end",
        "nameGap": 15,
        "gridIndex": 0,
        "axisLine": {
          "show": true,
          "onZero": true,
          "onZeroAxisIndex": 0,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        },
        "axisLabel": {
          "show": true,
          "margin": 8,
          "fontSize": 12
        },
        "inverse": false,
        "position": "right",
        "offset": 0,
        "splitNumber": 5,
        "min": 400,
        "max": 550,
        "minInterval": 0,
        "splitLine": {
          "show": false,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        }
      }
    ],
    "title": [
      {
        "show": true,
        "text": "\u5206\u6570\u7ebf\u548c\u4eba\u6570\u5206\u6790",
        "target": "blank",
        "subtarget": "blank",
        "padding": 5,
        "itemGap": 10,
        "textAlign": "auto",
        "textVerticalAlign": "auto",
        "triggerEvent": false,
        "textStyle": {
          "fontSize": 15
        },
        "left": "center"
      }
    ]
  };
  chart_53eed420295546fa9c67983887320b6f.setOption(option_c81a1703e1844341a09bf22121a2c0e1);
})

</script>

<template>
<div id="left-top"></div>
</template>

<style scoped>
#left-top{
  width: 100%;
  height: 100%;
}
</style>
